<template>
    <div class="category">
        <div class="search">
            <input type="text" placeholder="请输入关键字">
        </div>
        <div class="container">
            <div class="aside" ref="aside">
                <div 
                @click="leftClick(index)" 
                :class="{'active':current==index,'item':true}" 
                v-for="(item,index) in category"  :key="item.category_id">
                    {{ item.category_name }}
                </div>
            </div>
            <div class="content" v-if="category[current] && category[current].category_list">
                <div v-for="(cate, index) in category[current].category_list" :key="index">
                    <!-- 图片 -->
                    <div v-if="cate.view_type == 'cells_auto_fill'">
                        <img v-lazy="cate.body.items[0].img_url" width="90%" />
                    </div>
                    <!-- 标题 -->
                    <div v-if="cate.view_type == 'category_title'" class="category_title">
                        {{ cate.body.category_name }}
                    </div>
                    <!-- 商品组 -->
                    <div v-if="cate.view_type == 'category_group'">
                        <!-- :list自定义的名称， -->
                        <ProductList v-if="cate.body.product_list" :list="cate.body.product_list"></ProductList>
                        <ProductItems v-if="cate.body.items" :list="cate.body.items"></ProductItems>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// 导入组件
import ProductList from '@/components/ProductList.vue'
import ProductItems from '@/components/ProductItems.vue'
// 导入接口
import { GetCategory } from '@/api/mi';
export default {
    methods:{
        // 当左侧被单击
        leftClick(index){
            // 更新当前的current
            this.current = index;
            // 获取分类对应的数据
            var category_list =  this.category[this.current].category_list;
            // 如果没有这个数据
            if(!category_list){
                // 发起网络请求获取对应分类信息
                GetCategory({ 
                    client_id: 180100031051, 
                    channel_id: '', 
                    webp: 1 ,
                    // 传入category_id
                    cat_id:this.category[this.current].category_id
                })
                .then(res=>{
                    //更新数据(强制更新)
                    // vue响应式原理，数组下标更新，是检测不到，
                    // 要更新this.cagegory数组的第this.current元素需要强制使用
                    // this.$set(更新的数据，更新的下标，数据)
                    this.$set(this.category,this.current,res.data.data[0])
                })
                .catch(err=>console.log(err))
            }
            // 获取aside(类似通过id选择 ref="aside")
            // vue获取dom节点最准确的方式
            var aside = this.$refs.aside;
            // 获取单击元素的item  index从0开始 nth-of-type从1
            var item = aside.querySelector(".item:nth-of-type("+(index+1)+')');
            console.log(aside,item);
            // 单击滚动父元素的最顶部
            // aside.scrollTop = item.offsetTop;
            // 单击滚动父元素的最顶部 - aside高度一半 + item高度的一半
            aside.scrollTop = item.offsetTop-aside.offsetHeight/2+item.offsetHeight/2;
        }
    },
    components: {
        ProductList, ProductItems
    },
    data() {
        return {
            category: [],//分类数据
            current: 1,//默认选中
        }
    },
    created() {
        GetCategory({ client_id: 180100031051, channel_id: '', webp: 1 })
            .then(res => {
                this.category = res.data.data;
                // 分类数据
                console.log(res.data.data)
            })
            .catch(err => console.log("请求失败", err))
    }
}
</script>
<style lang="scss" scoped>
.category_title {
    font-weight: 800;
    font-size: .26rem;
}

.category {
    // height:100%;
    display: flex;
    flex-direction: column;

    .search {
        height: .88rem;
        line-height: .88rem;
        padding: 0 .6rem;

        input {
            height: .6rem;
            line-height: .6rem;
            background-color: #f0f0f0;
            border-radius: .6rem;
            width: 100%;
            border: none;
        }
    }

    .container {
        flex: 1;
        // 自适应高
        display: flex;
        overflow: hidden;
    }

    .aside {
        height: 100%;
        overflow-y: auto;
        width: 1.5rem;
        text-align: center;
        // 滚动平滑
        scroll-behavior: smooth;

        .item {
            font-size: .24rem;
            line-height: .88rem;
        }

        .active {
            color: #f70;
        }
    }
    .aside::-webkit-scrollbar{
        display:none;
        //移除aside滚动条
    }

    .content {
        flex: 1;
        height: 100%;
        overflow-y: auto;
    }
}
</style>